import Taro, { useRouter } from "@tarojs/taro";
import { useRef } from "react";
import { View } from "@tarojs/components";
import { CanvasSign, CanvasSignContext } from '@/components/CanvasSign/CanvasSign'
import { Button, NoticeBar, Avatar } from '@nutui/nutui-react-taro';

import styles from "./index.module.less";

const QuestionList: React.FC = () => {
    const signRef = useRef<CanvasSignContext>(null);
    const router = useRouter();

    // 确认签名完成
    const onSubmit = async () => {
        const result = signRef.current;
        if (!result) return console.error('签名失败');
        const success = await result.saveAsImage();
        // 使用固定的事件名称
        Taro.eventCenter.trigger('signatureCompleted', { url: success.tempFilePath });
        Taro.navigateBack({ delta: 1 });
    }

    const onClear = () => {
        signRef.current?.clear();
    }

    const onCancel = () => {
        Taro.navigateBack({ delta: 1 });
    }

    return (
        <View className={styles.container}>
            <CanvasSign ref={signRef} />
            <View className={styles.btns}>
                <Button className={styles.btn} type='primary' plain color='#00D3A3' onClick={onClear}>
                    重置
                </Button>
                <Button className={styles.btn} type='primary' plain color='#00D3A3' onClick={onCancel}>
                    取消
                </Button>
                <Button className={styles.btn} type='primary' color='#00D3A3' onClick={onSubmit}>
                    提交
                </Button>
            </View>
        </View>
    );
};

export default QuestionList;
